<template>
  <div class="home">
    <div class="base top-left" ref="lineRef"></div>
    <div class="base top-right">
      <div class="title">得分排行榜</div>
      <div class="rank" v-for="(item, index) in rankList" :key="index">
        <span :class="['index', index < 3 ? '' : 'last']">{{ index + 1 }}</span>
        <span class="name">{{ item.classDesc + '-' + item.name }}</span>
        <span class="score">{{ item.score }}分</span>
      </div>
    </div>
    <div class="base bottom-left" ref="zhuRef"></div>
    <div class="base bottom-right">
      <div class="title">出勤排行榜</div>
      <div class="content">
        <div class="left" ref="pieRef"></div>
        <div class="right">
          <div class="attendanceContent">
            <div class="head">
              <div class="index">
              </div>

              <span>姓名</span>
              <span>出勤次数</span>
              <span>占比</span>
            </div>
            <div class="attItem" v-for="(item, index) in attList">
              <div class="index">
                <div :class="['block', `block${index}`]"></div>

              </div>
              <span>{{ item.name }}</span>
              <span>{{ item.tice }}</span>
              <span>{{ item.bfb }}</span>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
import { getHomeInfo } from "@/api/home"
export default {
  data() {
    return {
      scoreVal: [],
      scoreLine: [],
      pieChart: null,
      lineChart: null,
      zhuCharts: null,

      attList: [
        {
          name: '张三',
          tice: 10,
          bfb: '100%',
        },
        {
          name: '李四',
          tice: 9,
          bfb: '90%',
        },
        {
          name: '王五',
          tice: 8,
          bfb: '80%',
        },
        {
          name: '赵六',
          tice: 7,
          bfb: '70%',
        },
        {
          name: '孙七',
          tice: 6,
          bfb: '60%',
        },
        {
          name: '周八',
          tice: 5,
          bfb: '50%',
        }
      ],
      rankList: [
        {
          classDesc: "高一七班",
          name: "张三",
          score: 95,
        },
        {
          classDesc: "高一七班",
          name: "李四",
          score: 90,
        },
        {
          classDesc: "高一七班",
          name: "王五",
          score: 85,
        },
        {
          classDesc: "高一七班",
          name: "赵六",
          score: 80,
        },
        {
          classDesc: "高一七班",
          name: "孙七",
          score: 75,
        },

      ],
      userList: [],
    };
  },
  created() {
    this.getHomeInfo()

  },
  mounted() {
    // console.log(this.$echarts);
    // this.zhuCharts = this.$echarts.init(this.$refs.zhuRef);

    // var chartData = [18, 28, 15, 6, 17, 8, 8];
    // var chartName = [
    //   "阳光新城幼儿园",
    //   "汤沐景苑幼儿园",
    //   "张寨镇新星幼儿园",
    //   "朱寨镇新思路幼儿园",
    //   "朱寨镇燕牌坊幼儿园",
    //   "龙固镇春龙佳源幼儿园",
    //   "任庄幼儿园",
    // ];
    // // var unit='亿元';
    // var myColor = ["#FFA483", "#F97F53", "#F45922"];
    // let zhuOption = {
    //   title: {
    //     text: "观众分布图",
    //     left: "left",
    //   },

    //   backgroundColor: "#fff",
    //   grid: {
    //     left: "2%",
    //     right: "10%",
    //     bottom: "10%",
    //     top: "10%",
    //     containLabel: true,
    //   },
    //   xAxis: [
    //     {
    //       show: false,
    //     },
    //     {
    //       show: false,
    //     },
    //   ],
    //   yAxis: {
    //     type: "category",
    //     inverse: true,
    //     show: false,
    //   },

    //   series: [
    //     //亮色条 百分比
    //     {
    //       show: true,
    //       type: "bar",
    //       barGap: "-100%",
    //       barWidth: "20%",
    //       z: 2,
    //       itemStyle: {
    //         normal: {
    //           color: function (params) {
    //             var num = myColor.length;
    //             return myColor[params.dataIndex % num];
    //           },
    //         },
    //       },
    //       label: {
    //         normal: {
    //           show: true,
    //           textStyle: {
    //             color: "#000",
    //             fontSize: 25,
    //             fontWeight: "bold",
    //           },
    //           position: "right",
    //           formatter: function (data) {
    //             return chartData[data.dataIndex].toFixed(2) + "%";
    //           },
    //         },
    //       },
    //       data: chartData,
    //     },
    //     //年份
    //     {
    //       show: true,
    //       type: "bar",
    //       xAxisIndex: 1, //代表使用第二个X轴刻度
    //       barGap: "-100%",
    //       barWidth: "10%",
    //       itemStyle: {
    //         normal: {
    //           barBorderRadius: 200,
    //           color: "transparent",
    //         },
    //       },
    //       label: {
    //         normal: {
    //           show: true,
    //           position: [0, "-20"],
    //           textStyle: {
    //             fontSize: 14,
    //             color: "#333",
    //           },
    //           formatter: function (data) {
    //             return chartName[data.dataIndex];
    //           },
    //         },
    //       },
    //       data: chartData,
    //     },
    //   ],
    // };
    // this.zhuCharts.setOption(zhuOption);


    // this.lineChart = this.$echarts.init(this.$refs.lineRef);
    // let pointStyle = {
    //   borderColor: "#ea6f21",
    //   color: "#fff",
    //   borderWidth: 2,
    // };
    // let labelStyle = {
    //   show: true,
    //   position: "top",
    //   lineHeight: 20,
    //   borderRadius: 5,
    //   backgroundColor: "rgba(255,255,255,.9)",
    //   borderColor: "#ccc",
    //   borderWidth: "1",
    //   padding: [5, 15, 4],
    //   color: "#000000",
    //   fontSize: 14,
    //   fontWeight: "normal",
    // };
    // let total = [55, 0, 68, 43, 88, 95];
    // let seriesData = [];

    // total.forEach((item, index) => {
    //   let ob = {
    //     value: item,
    //     itemStyle: pointStyle,
    //     label: labelStyle,
    //   };
    //   if (index === total.length - 1) {
    //     ob.itemStyle = {
    //       borderColor: "#ea6f21",
    //       color: "#ea6f21",
    //       borderWidth: 3,
    //     };
    //     ob.label = {
    //       show: true,
    //       position: "top",
    //       lineHeight: 20,
    //       backgroundColor: "#ea6f21",
    //       borderRadius: 5,
    //       borderColor: "#ea6f21",
    //       borderWidth: "1",
    //       padding: [5, 15, 4],
    //       color: "#fff",
    //       fontSize: 14,
    //       fontWeight: "normal",
    //     };
    //   }
    //   seriesData.push(ob);
    // });

    // let option = {
    //   title: {
    //     text: "得分分布图",
    //     left: "left",
    //   },
    //   grid: {
    //     top: "15%",
    //     left: "8%",
    //     right: "8%",
    //     bottom: "15%",
    //   },
    //   xAxis: [
    //     {
    //       type: "category",
    //       axisTick: {
    //         show: false,
    //       },

    //       splitLine: {
    //         show: true,
    //         lineStyle: {
    //           type: "dashed",
    //         },
    //       },
    //       data: this.scoreLine,
    //     },
    //   ],

    //   yAxis: [
    //     {
    //       type: "value",
    //       min: 0,
    //       max: 100,
    //       splitNumber: 3,
    //       axisLine: {
    //         show: false,
    //       },
    //       axisTick: {
    //         show: false,
    //       },
    //       splitLine: {
    //         show: true,
    //         lineStyle: {
    //           type: "dashed",
    //         },
    //       },
    //     },
    //   ],
    //   series: [
    //     {
    //       type: "line",
    //       showAllSymbol: true,
    //       symbol: "circle",
    //       symbolSize: 10,
    //       lineStyle: {
    //         normal: {
    //           color: "#ea6f21",
    //           width: 5,
    //         },
    //       },
    //       tooltip: {
    //         show: false,
    //       },
    //       areaStyle: {
    //         normal: {
    //           color: new this.$echarts.graphic.LinearGradient(
    //             0,
    //             0,
    //             0,
    //             1,
    //             [
    //               {
    //                 offset: 0,
    //                 color: "rgba(236, 169, 44, 1)",
    //               },
    //               {
    //                 offset: 1,
    //                 color: "rgba(236, 169, 44,0)",
    //               },
    //             ],
    //             false
    //           ),
    //         },
    //       },
    //       data: seriesData,
    //       //   markLine: {
    //       //     symbol: ["none", "none"], //去掉箭头
    //       //     itemStyle: {
    //       //       normal: {
    //       //         lineStyle: {
    //       //           type: "dashed",
    //       //           color: "#ccc",
    //       //           width: 2,
    //       //         },
    //       //       },
    //       //     },
    //       //     data: [
    //       //       {
    //       //         name: "Y 轴值为 80 的水平线",
    //       //         yAxis: 80,
    //       //         label: {
    //       //           normal: {
    //       //             formatter: "(标准) 80",
    //       //           },
    //       //         },
    //       //       },
    //       //     ],
    //       //   },
    //     },
    //   ],
    // };

    // this.lineChart.setOption(option);


    // this.pieChart = this.$echarts.init(this.$refs.pieRef);

    // var ydata = [
    //   {
    //     name: "财务管理决策实训",
    //     value: 18,
    //   },
    //   {
    //     name: "商品流通业实训",
    //     value: 16,
    //   },
    //   {
    //     name: "暖心陪伴（津乐园20cm定制蛋糕）",
    //     value: 15,
    //   },
    //   {
    //     name: "嘉果荟萃（津乐园20cm定制蛋糕）",
    //     value: 14,
    //   },
    //   {
    //     name: "优雅圆舞曲（津乐园20cm）",
    //     value: 10,
    //   },
    //   {
    //     name: "巧克力之夏（津乐园20cm定制蛋糕）",
    //     value: 7.9,
    //   },
    //   {
    //     name: "财税宝4G",
    //     value: 6.7,
    //   },
    //   {
    //     name: "成本会计",
    //     value: 6,
    //   },
    //   {
    //     name: "纳税会计与筹划",
    //     value: 4.5,
    //   },
    //   {
    //     name: "金融担保业实训",
    //     value: 3,
    //   },
    // ];
    // var color = [
    //   "#8d7fec",
    //   "#5085f2",
    //   "#e75fc3",
    //   "#f87be2",
    //   "#f2719a",
    //   "#fca4bb",
    //   "#f59a8f",
    //   "#fdb301",
    //   "#57e7ec",
    //   "#cf9ef1",
    // ];
    // var xdata = [
    //   "财务管理决策实训",
    //   "商品流通业实训",
    //   "暖心陪伴（津乐园20cm定制蛋糕）",
    //   "嘉果荟萃（津乐园20cm定制蛋糕）",
    //   "优雅圆舞曲（津乐园20cm）",
    //   "巧克力之夏（津乐园20cm定制蛋糕）",
    //   "财税宝4G",
    //   "成本会计",
    //   "纳税会计与筹划",
    //   "金融担保业实训",
    // ];

    // option = {
    //   backgroundColor: "rgba(255,255,255,1)",
    //   color: color,
    //   legend: {
    //     orient: "vartical",
    //     x: "left",
    //     top: "center",
    //     left: "60%",
    //     bottom: "0%",
    //     data: xdata,
    //     itemWidth: 8,
    //     itemHeight: 8,
    //     itemGap: 16,
    //     /*formatter:function(name){
    //         var oa = option.series[0].data;
    //         var num = oa[0].value + oa[1].value + oa[2].value + oa[3].value+oa[4].value + oa[5].value + oa[6].value + oa[7].value+oa[8].value + oa[9].value ;
    //         for(var i = 0; i < option.series[0].data.length; i++){
    //               if(name==oa[i].name){
    //                 return ' '+name + '    |    ' + oa[i].value + '    |    ' + (oa[i].value/num * 100).toFixed(2) + '%';
    //               }
    //         }
    //       }*/

    //     formatter: function (name) {
    //       return "" + name;
    //     },
    //   },
    //   series: [
    //     {
    //       type: "pie",
    //       clockwise: false, //饼图的扇区是否是顺时针排布
    //       minAngle: 2, //最小的扇区角度（0 ~ 360）
    //       radius: ["40%", "70%"],
    //       center: ["30%", "50%"],
    //       avoidLabelOverlap: false,
    //       itemStyle: {
    //         //图形样式
    //         normal: {
    //           borderColor: "#ffffff",
    //           borderWidth: 6,
    //         },
    //       },
    //       label: {
    //         normal: {
    //           show: false,
    //           position: "center",
    //           formatter: "{text|{b}}\n{c} ({d}%)",
    //           rich: {
    //             text: {
    //               color: "#666",
    //               fontSize: 14,
    //               align: "center",
    //               verticalAlign: "middle",
    //               padding: 8,
    //             },
    //             value: {
    //               color: "#8693F3",
    //               fontSize: 24,
    //               align: "center",
    //               verticalAlign: "middle",
    //             },
    //           },
    //         },
    //         emphasis: {
    //           show: true,
    //           textStyle: {
    //             fontSize: 24,
    //           },
    //         },
    //       },
    //       data: ydata,
    //     },
    //   ],
    // };
    // this.pieChart.setOption(option);


  },

  methods: {
    async getHomeInfo() {
      const res = await getHomeInfo()
      console.log(res, 'a');
      this.scoreLine = res.data.scoreDistributionChart.map(item => item.date)
      console.log(this.scoreLine, 'scoreLine');
      this.scoreVal = res.data.scoreDistributionChart.map(item => item.total)
      this.rankList = res.data.scoreRanking.map(item => {
        return {
          name: item.name,
          score: item.total,
          classDesc: '高一七班'
        }
      }).reverse().slice(0, 5)
      this.userList = res.data.audienceDistributionMap.map(item => {
        return {
          name: item.match_name,
          value: item.audience_number * 1
        }
      })

      this.attList = res.data.attendanceLeaderboard.map(item => {
        return {
          name: item.name,
          tice: item.has_score_total * 1,
          bfb: item.percent

        }
      }).splice(0,5)
      this.setEchart()
    },
    setEchart() {
      console.log(this.$echarts);
      this.zhuCharts = this.$echarts.init(this.$refs.zhuRef);

      var chartData = this.userList.map(item => item.value)
      var chartName = this.userList.map(item => item.name)
      console.log(chartData, chartName,'999999999');
      
      // var unit='亿元';
      var myColor = ["#FFA483", "#F97F53", "#F45922"];
      let zhuOption = {
        title: {
          text: "观众分布图",
          left: "left",
        },

        backgroundColor: "#fff",
        grid: {
          left: "2%",
          right: "10%",
          bottom: "10%",
          top: "10%",
          containLabel: true,
        },
        xAxis: [
          {
            show: false,
          },
          {
            show: false,
          },
        ],
        yAxis: {
          type: "category",
          inverse: true,
          show: false,
        },

        series: [
          //亮色条 百分比
          {
            show: true,
            type: "bar",
            barGap: "-100%",
            barWidth: "20%",
            z: 2,
            itemStyle: {
              normal: {
                color: function (params) {
                  var num = myColor.length;
                  return myColor[params.dataIndex % num];
                },
              },
            },
            label: {
              normal: {
                show: true,
                textStyle: {
                  color: "#000",
                  fontSize: 25,
                  fontWeight: "bold",
                },
                position: "right",
                formatter: function (data) {
                  return chartData[data.dataIndex].toFixed(2) + "%";
                },
              },
            },
            data: chartData,
          },
          //年份
          {
            show: true,
            type: "bar",
            xAxisIndex: 1, //代表使用第二个X轴刻度
            barGap: "-100%",
            barWidth: "10%",
            itemStyle: {
              normal: {
                barBorderRadius: 200,
                color: "transparent",
              },
            },
            label: {
              normal: {
                show: true,
                position: [0, "-20"],
                textStyle: {
                  fontSize: 14,
                  color: "#333",
                },
                formatter: function (data) {
                  return chartName[data.dataIndex];
                },
              },
            },
            data: chartData,
          },
        ],
      };
      this.zhuCharts.setOption(zhuOption);


      this.lineChart = this.$echarts.init(this.$refs.lineRef);
      let pointStyle = {
        borderColor: "#ea6f21",
        color: "#fff",
        borderWidth: 2,
      };
      let labelStyle = {
        show: true,
        position: "top",
        lineHeight: 20,
        borderRadius: 5,
        backgroundColor: "rgba(255,255,255,.9)",
        borderColor: "#ccc",
        borderWidth: "1",
        padding: [5, 15, 4],
        color: "#000000",
        fontSize: 14,
        fontWeight: "normal",
      };
      let total = this.scoreVal;
      let seriesData = [];

      total.forEach((item, index) => {
        let ob = {
          value: item,
          itemStyle: pointStyle,
          label: labelStyle,
        };
        if (index === total.length - 1) {
          ob.itemStyle = {
            borderColor: "#ea6f21",
            color: "#ea6f21",
            borderWidth: 3,
          };
          ob.label = {
            show: true,
            position: "top",
            lineHeight: 20,
            backgroundColor: "#ea6f21",
            borderRadius: 5,
            borderColor: "#ea6f21",
            borderWidth: "1",
            padding: [5, 15, 4],
            color: "#fff",
            fontSize: 14,
            fontWeight: "normal",
          };
        }
        seriesData.push(ob);
      });

      let option = {
        title: {
          text: "得分分布图",
          left: "left",
        },
        grid: {
          top: "15%",
          left: "8%",
          right: "8%",
          bottom: "15%",
        },
        xAxis: [
          {
            type: "category",
            axisTick: {
              show: false,
            },

            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed",
              },
            },
            data: this.scoreLine,
          },
        ],

        yAxis: [
          {
            type: "value",
            min: 0,
            max: 1000,
            splitNumber: 3,
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed",
              },
            },
          },
        ],
        series: [
          {
            type: "line",
            showAllSymbol: true,
            symbol: "circle",
            symbolSize: 10,
            lineStyle: {
              normal: {
                color: "#ea6f21",
                width: 5,
              },
            },
            tooltip: {
              show: false,
            },
            areaStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(236, 169, 44, 1)",
                    },
                    {
                      offset: 1,
                      color: "rgba(236, 169, 44,0)",
                    },
                  ],
                  false
                ),
              },
            },
            data: seriesData,
            //   markLine: {
            //     symbol: ["none", "none"], //去掉箭头
            //     itemStyle: {
            //       normal: {
            //         lineStyle: {
            //           type: "dashed",
            //           color: "#ccc",
            //           width: 2,
            //         },
            //       },
            //     },
            //     data: [
            //       {
            //         name: "Y 轴值为 80 的水平线",
            //         yAxis: 80,
            //         label: {
            //           normal: {
            //             formatter: "(标准) 80",
            //           },
            //         },
            //       },
            //     ],
            //   },
          },
        ],
      };

      this.lineChart.setOption(option);


      this.pieChart = this.$echarts.init(this.$refs.pieRef);

      var ydata = this.attList.map(item => {
        return {
          name: item.name,
          value: item.tice
        }
      }).splice(0, 5)

      console.log(ydata,'88888888888');
      
      var color = [
        "#8d7fec",
        "#5085f2",
        "#e75fc3",
        "#f87be2",
        "#f2719a",
        "#fca4bb",
        "#f59a8f",
        "#fdb301",
        "#57e7ec",
        "#cf9ef1",
      ];
      var xdata = this.attList.map(item => {
        return item.name

      }).splice(0, 5)

      option = {
        backgroundColor: "rgba(255,255,255,1)",
        color: color,
        legend: {
          orient: "vartical",
          x: "left",
          top: "center",
          left: "60%",
          bottom: "0%",
          data: xdata,
          itemWidth: 8,
          itemHeight: 8,
          itemGap: 16,
          /*formatter:function(name){
              var oa = option.series[0].data;
              var num = oa[0].value + oa[1].value + oa[2].value + oa[3].value+oa[4].value + oa[5].value + oa[6].value + oa[7].value+oa[8].value + oa[9].value ;
              for(var i = 0; i < option.series[0].data.length; i++){
                    if(name==oa[i].name){
                      return ' '+name + '    |    ' + oa[i].value + '    |    ' + (oa[i].value/num * 100).toFixed(2) + '%';
                    }
              }
            }*/

          formatter: function (name) {
            return "" + name;
          },
        },
        series: [
          {
            type: "pie",
            clockwise: false, //饼图的扇区是否是顺时针排布
            minAngle: 2, //最小的扇区角度（0 ~ 360）
            radius: ["40%", "70%"],
            center: ["30%", "50%"],
            avoidLabelOverlap: false,
            itemStyle: {
              //图形样式
              normal: {
                borderColor: "#ffffff",
                borderWidth: 6,
              },
            },
            label: {
              normal: {
                show: false,
                position: "center",
                formatter: "{text|{b}}\n{c} ({d}%)",
                rich: {
                  text: {
                    color: "#666",
                    fontSize: 14,
                    align: "center",
                    verticalAlign: "middle",
                    padding: 8,
                  },
                  value: {
                    color: "#8693F3",
                    fontSize: 24,
                    align: "center",
                    verticalAlign: "middle",
                  },
                },
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: 24,
                },
              },
            },
            data: ydata,
          },
        ],
      };
      this.pieChart.setOption(option);


    }
  },
};
</script>
<style scope lang="less">
.home {
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  .base {
    width: 49%;
    height: 48%;

    background: #fff;

    border-radius: 15px;
    margin-bottom: 20px;
  }

  .top-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px;

    .title {
      font-weight: 700;
      font-size: 22px;
    }

    .rank {
      width: 100%;
      height: 40px;
      display: flex;
      align-items: center;
      margin-bottom: 10px;

      .index {
        width: 25px;
        height: 25px;
        margin-right: 12px;
        background-color: #fcdcc4;
        border-radius: 50%;
        color: #fd7923;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
      }

      .last {
        color: #8c8c8c;
        background-color: #ecf4f4;
      }

      .score {
        margin-left: auto;
      }
    }
  }

  .bottom-right {
    display: flex;
    flex-direction: column;

    .title {
      display: flex;
      justify-content: center;
      font-weight: 700;
      font-size: 22px;
    }

    .content {
      height: 100%;
      display: flex;
      background-color: #fff;
    }

    .left {
      width: 60%;
    }

    .right {
      flex: 1;
      background-color: #fff;

      .attendanceContent {
        height: 100%;
        padding: 10px;

        .index {
          width: 30px;
        }

        .head {
          display: flex;

          span {
            flex: 1;
          }
        }

        .attItem {
          display: flex;
          margin-bottom: 25px;

          .block {
            width: 20px;
            height: 20px;
            border-radius: 2px;
          }

          .block0 {
            background-color: #fa8404;
          }

          .block1 {
            background-color: #fc8404;
          }

          .block2 {
            background-color: #fcaa42;
          }

          .block3 {
            background-color: #fcc06f;
          }

          .block4 {
            background-color: #fcd094;
          }

          .block5 {
            background-color: #fce7c4;
          }

          span {
            flex: 1;

          }
        }
      }
    }
  }
}
</style>
